<template>
  <view>
    <u--form :model="value" v-bind="$attrs" ref="baseForm" >
      <view v-for="(item, index) in formList" :key="index">
        <user-pick
          v-if="item.type === 'userPicker'"
          :label="item.label"
          v-model="value[item.model]"
          :multiple="item.multiple"
		  :placeholder="item.placeholder"
          v-bind="$attrs"
        ></user-pick>
        <dept-pick
          v-else-if="item.type === 'deptPicker'"
          :label="item.label"
          v-model="value[item.model]"
          v-bind="$attrs"
        ></dept-pick>
        <view v-else-if="item.type === 'slot'">
          <slot :name="item.slotName"></slot>
        </view>
        <formItem
          v-else
          v-bind="item"
          :item="item"
          v-on="$listeners"
          v-model="value[item.model]"
          @change="handlChange"
          @textareaChange="textareaChange"
          @pickerConfirm="pickerConfirm"
          @datetimeConfirm="datetimeConfirm"
          @uploadFileSuccess="uploadFileSuccess"
          @deletePic="deletePic"
        ></formItem>
      </view>
      <!-- 操作按钮 -->
      <view class="operation">
        <view class="register" v-if="btnMessage.state" @click="cancel"
          >{{ btnMessage.cancels }}
        </view>
        <view class="register" @click="submit"> {{  btnMessage.submit }} </view>
      </view>
    </u--form>
  </view>
</template>

<script>
import formItem from "./formItem.vue";
import userPick from "@/pages/Components/userPick";
import deptPick from "@/pages/Components/department";

export default {
  name: "BaseForm",
  props: ["formList", "value", "btnMessage"],
  components: {
    formItem,
    userPick,
    deptPick,
  },
  methods: {
    handlChange() {
      this.$emit("input", { ...this.value });
    },
    textareaChange(value) {
      this.value[value.item.model] = value.value;
      this.$emit("input", { ...this.value });
    },
    pickerConfirm(value) {
      this.value[value.item.model] =  value.item.value || value.item.text
      this.$emit("input", { ...this.value });
    },
    datetimeConfirm(value) {
      this.value[value.item.model] = value.value;
      this.$emit("input", { ...this.value });
    },
    cancel() {
      this.$emit("cancel");
    },
    submit() {
      this.$emit("submit");
    },
    uploadFileSuccess(file) {
      this.value[file.model] = file.data;
	  this.$emit("input", { ...this.value });
    },
    deletePic(file) {
      this.value[file.model] = file.data;
      this.$emit("input", { ...this.value });
    },
  },
};
</script>

<style lang="scss" scoped>
.operation {
  display: flex;
  justify-content: center;
  align-items: center;

  .register {
    text-align: center;
    width: 35%;
    color: #333;
    font-size: 38rpx;
    border-radius: 8px;
    background: #FFF;
    border: 1px solid #f0f0f0;
    height: 100rpx;
    line-height: 100rpx;
    margin: 20rpx;
  }

  .register:last-child {
    flex: 1;
    color: #f0f0f0;
    background-color: #1989fa;
  }
}
</style>
